<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse accordion value="0">
          <Panel>
            地图层
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="地图交互">
                  <i-switch v-model="chartOption.map3D.roam">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItem label="3D场景高度">
                  <InputNumber size="small" :max="50" :min="10" :step="1" v-model="chartOption.map3D.boxHeight"></InputNumber>
                </FormItem>
                <FormItem label="系列名称">
                  <Input size="small" v-model="chartOption.map3D.name" placeholder=""/>
                </FormItem>

                <FormItemPanel title="地图样式">
                  <FormItem label="底色">
                    <PnColorPicker size="small" v-model="chartOption.map3D.itemStyle.normal.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="透明度">
                    <InputNumber size="small" :max="1" :min="0.1" :step="0.1" v-model="chartOption.map3D.itemStyle.normal.opacity"></InputNumber>
                  </FormItem>
                  <FormItem label="区块边框宽度">
                    <InputNumber size="small" :max="10" :min="0" :step="0.1" v-model="chartOption.map3D.itemStyle.normal.borderWidth"></InputNumber>
                  </FormItem>
                  <FormItem label="区块边框颜色">
                    <PnColorPicker size="small" v-model="chartOption.map3D.itemStyle.normal.borderColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="视觉映射配置">
                  <FormItem label="最小值">
                    <InputNumber size="small" :max="10000" :min="0" v-model="chartOption.visualMap[0].min"></InputNumber>
                  </FormItem>
                  <FormItem label="最大值">
                    <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.visualMap[0].max"></InputNumber>
                  </FormItem>
                  <FormItem label="最小值颜色">
                    <PnColorPicker size="small" v-model="chartOption.visualMap[0].minColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="最大值颜色">
                    <PnColorPicker size="small" v-model="chartOption.visualMap[0].maxColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="标签">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.map3D.label.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="chartOption.map3D.label.textStyle.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="字体大小">
                    <InputNumber size="small" :max="10000" :min="1" v-model="chartOption.map3D.label.textStyle.fontSize"></InputNumber> px
                  </FormItem>
                  <FormItem label="透明度">
                    <InputNumber size="small" :max="1" :min="0.1" :step="0.1" v-model="chartOption.map3D.label.textStyle.opacity"></InputNumber>
                  </FormItem>
                </FormItemPanel>

                <FormItemPanel title="镜头配置">
                  <FormItem label="镜头距离">
                    <Slider size="small" show-input v-model="chartOption.map3D.viewControl.distance" :max="200" :min="40" :step="10"></Slider>
                  </FormItem>
                  <FormItem label="水平旋转">
                    <Slider size="small" show-input v-model="chartOption.map3D.viewControl.beta" :max="80" :min="-80" :step="10"></Slider>
                  </FormItem>
                  <FormItem label="上下旋转">
                    <Slider size="small" show-input v-model="chartOption.map3D.viewControl.alpha" :max="90" :min="5" :step="5"></Slider>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel>
            飞线层
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="系列名称">
                  <Input size="small" v-model="chartOption.lines3D.name" placeholder=""/>
                </FormItem>
                <FormItem label="速度">
                  <InputNumber size="small" :max="300" :min="10" :step="10" v-model="chartOption.lines3D.effect.constantSpeed"></InputNumber>
                </FormItem>
                <FormItem label="飞线颜色">
                  <PnColorPicker size="small" v-model="chartOption.lines3D.lineStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="飞线线宽">
                  <InputNumber size="small" :max="2" :min="0.1" :step="0.1" v-model="chartOption.lines3D.lineStyle.width"></InputNumber>
                </FormItem>
                <FormItem label="飞线透明度">
                  <InputNumber size="small" :max="1" :min="0.1" :step="0.1" v-model="chartOption.lines3D.lineStyle.opacity"></InputNumber>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            柱状图层
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="系列名称">
                  <Input size="small" v-model="chartOption.bar3D.name" placeholder=""/>
                </FormItem>
                <FormItem label="柱子粗细">
                  <InputNumber size="small" :max="2" :min="0.1" :step="0.1" v-model="chartOption.bar3D.barSize"></InputNumber>
                </FormItem>
                <FormItemPanel title="标签">
                  <FormItem label="显示">
                    <i-switch v-model="chartOption.bar3D.label.show">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="格式化">
                    <Input size="small" v-model="chartOption.bar3D.label.formatter" placeholder=""/>
                  </FormItem>
                </FormItemPanel>
                <FormItemPanel title="视觉映射配置">
                  <FormItem label="最小值">
                    <InputNumber size="small" :max="10000" :min="0" v-model="chartOption.visualMap[1].min"></InputNumber>
                  </FormItem>
                  <FormItem label="最大值">
                    <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.visualMap[1].max"></InputNumber>
                  </FormItem>
                  <FormItem label="最小值颜色">
                    <PnColorPicker size="small" v-model="chartOption.visualMap[1].minColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="最大值颜色">
                    <PnColorPicker size="small" v-model="chartOption.visualMap[1].maxColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel v-if="chartOption.title">
            标题
            <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
            <div slot="content">
              <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
            </div>
          </Panel>
        </Collapse>

      </TabPane>

      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <Alert type="warning" show-icon>本组件暂不支持CSV数据源</Alert>
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="World3DMapChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'World3DMapChartForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    data() {
      return {
        maps: [
          {label: '中国地图', value: 'china'},
          {label: '世界地图', value: 'world'}
        ]
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
